<template>
  <view class="">
    <SearchLink></SearchLink>
    <!-- 主体内容 -->
    <!-- 请求前不渲染页面 -->
    <view class="content" v-if="categoryList.length">
      <view class="left">
        <view
          class="cate1"
          :class="{ active: activeIndex === index }"
          v-for="(cate1, index) in categoryList"
          @click="selectCate1(index)"
        :key="index">
          {{ cate1.cat_name }}
        </view>
      </view>
      <view class="right">
        <image src="/static/images/titleImage.png" mode=""></image>
        <!-- 二级分类 -->
        <view
          class="cate2"
          v-for="(cate2, index2) in categoryList[activeIndex].children"
          :key="index2"
        >
          <view class="name">
            /<text>{{ cate2.cat_name }}</text
            >/
          </view>
          <!-- 三级分类 -->
          <view class="cate3-wrapper">
            <view
              class="cate3"
              v-for="(cate3, index3) in cate2.children"
              :key="index3"
              @click="toSearchList(cate3.cat_name)"
            >
              <image :src="cate3.cat_icon" mode=""></image>
              <text>{{ cate3.cat_name }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import SearchLink from '@/components/SearchLink'

export default {
  components: {
    // SearchLink:SearchLink
    SearchLink
  },
  data () {
    return {
      // 默认一级分类第一项被选中
      activeIndex: 0,
      // 分类数组
      categoryList: []
    }
  },
  onShow () {
    // 设置购物车右上角的文本
    wx.setTabBarBadge({
      index: 2,
      text: (this.$store.getters.getCart || []).length + ''
    })
  },
  onLoad () {
    this.getCategories()
  },
  methods: {
    async getCategories () {
      this.categoryList = await this.$request({
        url: '/api/public/v1/categories'
      })
    },
    selectCate1 (index) {
      this.activeIndex = index
    },
    // 跳转搜索列表页
    toSearchList (catName) {
      console.log(catName)
      wx.navigateTo({
        url: '/pages/search_list/main?catName=' + catName
      })
    }
  }
}
</script>

<style lang="less">
.content {
  display: flex;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 100rpx;

  .left {
    width: 198rpx;
    overflow: scroll;

    .cate1 {
      height: 100rpx;
      line-height: 100rpx;
      box-sizing: border-box;
      border-bottom: 1px solid #eee;
      background-color: #f4f4f4;
      color: #333;
      text-align: center;

      &.active {
        color: #eb4450;
        background-color: #fff;
        position: relative;

        // 处于选中状态才有伪元素
        &::before {
          position: absolute;
          content: '';
          background-color: #eb4450;
          width: 8rpx;
          height: 60rpx;
          left: 0;
          top: 20rpx;
        }
      }
    }
  }

  .right {
    flex: 1;
    overflow: scroll;
    padding: 20rpx 16rpx 0;

    // >是指子元素
    > image {
      width: 520rpx;
      height: 180rpx;
    }
  }
}

.cate2 {
  margin-bottom: 60rpx;

  .name {
    height: 110rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #e0e0e0;

    text {
      color: #333;
      margin: 0 30rpx;
    }
  }
}

.cate3-wrapper {
  display: flex;
  flex-wrap: wrap;
}

.cate3 {
  width: 33.33%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20rpx;

  > image {
    width: 120rpx;
    height: 120rpx;
  }
}
</style>
